<template>
	<view style="padding-left: 10rpx;">
		<u-picker v-model="resultShow" mode="selector" :default-selector="defaultselector" :range="resultList" @confirm="resultForm"></u-picker>
		<div style="display: flex; margin: 10rpx 10rpx 5rpx 30rpx;">
		    <u-form-item>
		        <u-input v-model="sectionNo" placeholder="请输入工段号" />
		    </u-form-item>
			<u-form-item style="margin-right: 30rpx;">	
		        <u-button type="success" size="mini" @click="inspectionFind">查询</u-button>
			</u-form-item>
			<u-form-item>
		        <u-button type="success" size="mini" @click="resultUpd">修改结果</u-button>
			</u-form-item>
		</div>
		<u-checkbox-group @change="checkboxGroupChange" wrap width="100%">	
			<u-checkbox v-model="item.checked" v-for="(item,index) in records" :key="index":name="item.id">
				<view class="list-item-wrapper" :style="onlineStyle[index]">
			        <view class="list-item">
			        	<view>工别</view>
			        	<view>{{item.orderType}}</view>	
			        </view>
			        <view class="list-item">
			        	<view>工单号</view>
			        	<view>{{item.workOrderNo}}</view>
			        </view>
			        <view class="list-item">
			        	<view>工序名称</view>
			        	<view>{{item.processName}}</view>
			        </view>
					<view class="list-item">
						<view>工段号</view>
						<view>{{item.sectionNo}}</view>
					</view>
			        <view class="list-item">
			        	<view>内容</view>
			        	<view>{{item.context}}</view>
			        </view>
			        <view class="list-item">	
			        	<view>检查结果</view>
			        	<view>{{item.result}}</view>
			        </view>
				</view>
			</u-checkbox>
		</u-checkbox-group>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { inspectionFind,inspectionUpd } from '../utils/index.js'
	export default {	
		data() {
			return {
				labelWidth: 160,		//表单每一项的宽度
				autoHeight: true,		//表单“描述”输入框自动高度
				type: 'textarea',		//将描述的输入框设置为textarea
				rules: {						//表单提交前的验证
					context: [{
							required: true, 
							message: '请输入内容', 
							trigger: 'blur',
					}],
				},
				feedbackId: '',
				records: [],
				offlines: false,
				feedObj: {},
				onlineStyle: ["",""],	//状态时填充的样式
				user: uni.getStorageSync('user'),
				resultShow: false,
				defaultselector: [0],
				resultList:['合格','不合格','未检查','不涉及'],
				result: '',
				checkbox:[],
				sectionNo:'',
			}
		},
		methods:{
			resultUpd(){
				if(!this.checkbox.length) return this.$refs.uTips.show({
						title: '请选择！',
						type: 'error',
						duration: '2000'
					})
				this.resultShow = true
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.checkbox = []
				if(e.length){
					e.forEach(item => {
						this.records.forEach(elm =>{
							if(item == elm.id){
								this.checkbox.push({
									id: elm.id,
									planNo: elm.planNo,
									processId: elm.processId,
								})
							}
						})
					})
				}
				console.log(this.checkbox);
			},
			// 点击确定
			resultForm(e){
				this.result = this.resultList[e[0]]
				console.log('11',this.checkbox);
				this.checkbox.forEach(async item =>{
					let query = {
						id: item.id,
						planNo: item.planNo,
						processId: item.processId,
						result: this.result
					}
					// 修改
					await inspectionUpd(query)
					this.checkbox = []
				})
				setTimeout(async ()=>{
				await this.inspectionFind() //重新渲染页面
				}, 500)
			},
			// 关闭弹出框
			cancel() {
				this.offlines = false
			},
			showContext(item){
				this.offlines = true
				this.feedObj = item
			},
			async inspectionFind(val) {	
				let query = { page: 1, limit: 10000,sectionNo: this.sectionNo}
				const { data } = await inspectionFind(query)
				console.log(data.data)
				this.records = data.data.list
				if(!data.data.list) return
				for(let i = 0;i < this.records.length;i++){				//遍历records数组改变背景颜色
					this.judgeStyle(i)
				}
			},
			judgeStyle(value) {
				if(this.records[value].result !== '合格') {
					this.onlineStyle[value] = "background-color: #FFEFD5;"
				} else {
					this.onlineStyle[value] = "background-color: #90EE90;"
				}
			},
		},
		onLoad(option) {
			this.inspectionFind()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
		}
	}
</script>

<style>
	.main-content {
		width: 100%;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 15rpx;
		padding: 10rpx 30rpx;
	}
	.content {
		padding: 24rpx;
		text-align: center;
	}
	.buttonGap {
		margin-top: 20rpx;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		display: block;
		width: 100%;
		margin: 5rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 5rpx 5rpx;
	}
	.nofinish{
		color: red;
	}
	.u-checkbox__label{
		width: 100%;
	}
</style>
